<template>
	<div>
		<div class="search_info" v-if="searchVisible">
			<div class="pop_content">
				<div class="popSearch">
					<div class="popSearchbox">
						<div class="popSearchbox_item">
							<div class="popSearch_tt">通话时间</div>
							<div class="popSearch_time">
								<div class="popSearch_time_txt" @click="handleSelectTime('StartCreateTime')">
									<input v-model="StartCreateTime" class="popSearch_time_val" placeholder="开始时间"
										readonly />
								</div>
								<span class="popSearch_time_icon">-</span>
								<div class="popSearch_time_txt" @click="handleSelectTime('EndCreateTime')">
									<input v-model="EndCreateTime" class="popSearch_time_val" placeholder="结束时间"
										readonly />
								</div>
							</div>
						</div>
						<div class="popSearchbox_item">
							<div class="popSearch_tt">组织及员工</div>
							<van-field v-model="fixCenterName" name="所属组织" label="所属组织" input-align="right"
								placeholder="请选择" readonly right-icon="arrow"
								@click="handleSelect('fixCenterId', 'fixCenterName')" />
							<van-field v-model="userName" name="员工" label="员工" input-align="right" placeholder="请选择"
								readonly right-icon="arrow" @click="handleSelect('userId', 'userName')" />
						</div>
						<div class="popSearchbox_item">
							<div class="popSearch_tt">通话类型</div>
							<div class="popSearchbox_selectList">
								<div class="popSearchbox_select_item" :class="item.check ? 'active' : ''"
									v-for="(item, index) in callTypeList" :key="index"
									@click="handleSearchSelect(index, 'callTypeList')">
									{{ item.name }}
								</div>
							</div>
						</div>

						<div class="popSearchbox_item">
							<div class="popSearch_tt">通话状态</div>
							<div class="popSearchbox_selectList">
								<div class="popSearchbox_select_item" :class="item.check ? 'active' : ''"
									v-for="(item, index) in stateList" :key="index"
									@click="handleSearchSelect(index, 'stateList')">
									{{ item.name }}
								</div>
							</div>
						</div>

            <div class="popSearchbox_item">
              <div class="popSearch_tt">通话时长</div>
              <div class="popSearchbox_selectList">
                <div class="popSearchbox_select_item" :class="item.check ? 'active' : ''"
                     v-for="(item, index) in timesList" :key="index"
                     @click="handleCallTimes(index)">
                  {{ item.name }}
                </div>
              </div>
            </div>

					</div>

					<div class="popSearch_footer">
						<div class="popSearch_btn reset_btn" @click.stop="handleSearchReset">重置</div>
						<div class="popSearch_btn confirm_btn" @click.stop="handleSearchConfirm">确认</div>
					</div>
				</div>
			</div>
			<div class="mask" @click="closeModel"></div>
		</div>
		<van-popup v-model="showSelectPicker" position="bottom">
			<van-field name="模糊查询" input-align="left" v-model="likeWho" label="模糊查询"
				placeholder="请输入模糊查询关键词" />
			<van-picker show-toolbar :columns="columns" @confirm="handleSelectConfirm"
				@cancel="showSelectPicker = false" :value-key="likeWhoField=='userId'?'perName':'name'" />
		</van-popup>
		<van-popup v-model="showPickerDate" position="bottom">
			<van-datetime-picker v-model="currentDate" type="date" @cancel="onCancelDate" @confirm="onConfirmDate"
				:formatter="formatter" />
		</van-popup>
	</div>
</template>

<script>
import commonApi from '@/api/commonApi'
import { getCurrentFirstDay, getCurrentLastDay, getCurrentTime } from '@/utils/util'

export default {
		props: ['searchVisible','tabindex','fixCenterOptions'],
		data() {
			return {
				// searchVisible: false,
				showSelectPicker: false,
				showPickerDate: false,
				StartCreateTime: '',
				EndCreateTime: '',
				fixCenterName: '',
				fixCenterId:'',
				userName: '',
				userId:'',
				callTypeList: [{
						check: false,
						name: '呼出'
					},
					{
						check: false,
						name: '呼入'
					}
				],
				stateList: [{
					check: false,
					name: '双方接听'
				}, {
					check: false,
					name: '客户未接听'
				}, {
					check: false,
					name: '座席未接听'
				}, {
					check: false,
					name: '座席接听'
				}],
        timesList: [
          {
            check: false,
            name: '30s以内',
            value: '0'
          }, {
            check: false,
            name: '大于等于30s',
            value: '30'
          }, {
            check: false,
            name: '大于等于60s',
            value: '60'
          }, {
            check: false,
            name: '大于等于90s',
            value: '90'
          }, {
            check: false,
            name: '大于等于120s',
            value: '120'
          }],
				likeWho: '',
				likeWhoField: '',
				columns: [],
				currentDate: new Date(),
				timeField: '',
				// fixCenterOptions: [],
				userOptions: []
			}
		},
		mounted() {
      console.log(this.tabindex,"tabindex");
      if (this.tabindex == 0) {
      	this.StartCreateTime = getCurrentTime()
      	this.EndCreateTime = getCurrentTime()
      } else {
      	this.StartCreateTime = getCurrentFirstDay()
      	this.EndCreateTime = getCurrentLastDay()
      }
			// this.getMainFixCenter()
		},
		watch: {
			likeWho: function (nval, oval) {
			  if (this.likeWhoField == 'fixCenterId') {
			    if (nval) {
			      let newArr = this.fixCenterOptions.filter((item) => {
			        return item.name.indexOf(nval) > -1
			      })
			      console.log(newArr)
			      this.columns = newArr
			    } else {
			      this.columns = this.fixCenterOptions
			    }
			  }
			  if (this.likeWhoField == 'userId') {
			    if (nval) {
			      let newArr = this.userOptions.filter((item) => {
			        return item.perName.indexOf(nval) > -1
			      })
			      console.log(newArr)
			      this.columns = newArr
			    } else {
			      this.columns = this.userOptions
			    }
			  }
			},
		},
		methods: {
			closeModel(){
				this.$emit('close')
			},
			// 获取维修中心
			getMainFixCenter() {
				commonApi
					.getMainFixCenter({
						orgId: 'test',
						userId: this.userId,
						type: '',
					})
					.then((res) => {
						if (res.data) {
							this.fixCenterOptions = res.data
							// for (var i = 0; i < res.data.length; i++) {
							// 	this.fixCenterList.push(res.data[i].billId);
							// }
							//this.getCallLogs()
						}
					})
			},
			async getUser() {
				if (this.fixCenterId == null || this.fixCenterId == '') {
					alert("请先选择组织")
					return
				}
				// this.showPersonSelectPicker = true
				// this.personcolumns = this.personOptions
				commonApi
					.getSeatPersons({
						org_id: this.fixCenterId,
						// org_id:"ivNk3xcMTvqFWeEV4yq+XsznrtQ=",
					})
					.then((res) => {
						if (res.data) {
							this.userOptions = res.data
							this.columns=res.data
							this.showSelectPicker = true
							// this.personcolumns = this.personOptions
						}
					})
			},
			// 时间筛选
			handleSelectTime(name) {
        if (this.tabindex == 0) {
            return
        }
				this.timeField = name
				this.showPickerDate = true
			},

			// 选择下拉
			handleSelect(field, fieldName) {


				if (field == 'fixCenterId') {
					this.showSelectPicker = true
					this.columns = this.fixCenterOptions
				} else if (field == 'userId') {
					// this.columns = this.fixCenterList
					this.getUser()
				}
				this.likeWhoField = field
			},
			handleSearchSelect(index,name) {
				this[name][index].check=!this[name][index].check
			},
      handleCallTimes(index) {

        let check = this.timesList[index].check

        this.timesList.forEach(item=>{
          item.check = false
        })

        this.timesList[index].check = !check
      },
			// 选择下拉确认
			handleSelectConfirm(value, index) {
			  if (this.likeWhoField == 'fixCenterId') {
			    this.fixCenterId= value.billId
			    this.fixCenterName= value.name
			  }else {
			   this.userId= value.perId
			   this.userName= value.perName
			  }
			  this.likeWhoField = ''
			  this.showSelectPicker = false
			},
			// 日期组件自定义格式
			formatter(type, value) {
			  if (type === 'year') {
			    this.value1 = value // 可以拿到当前点击的数值
			    return `${value}年`
			  } else if (type === 'month') {
			    this.value2 = value
			    return `${value}月`
			  }
			  this.value3 = value
			  return `${value}日`
			},
			// 时间确认
			onConfirmDate() {
			  this[this.timeField] = `${this.value1}-${this.value2}-${this.value3}` // 字符串拼接 结果入2020-07-03
			  this.onCancelDate()
			},
			onCancelDate() {
			  this.showPickerDate = false
			},
			handleSearchReset(){
				this.likeWho=''
				this.fixCenterName=''
				this.userName=''
        this.fixCenterId=''
        this.userId=''
				this.callTypeList.find(item=>{item.check=false})
				this.stateList.find(item=>{item.check=false})
        this.timesList.find(item=>{item.check=false})
			},
			handleSearchConfirm(){
				let that=this
				let type = []
				that.callTypeList.find(item => {
					if (item.check == true) {
						type.push(item.name == "呼入" ? 0 : 1)
					}
				})
				let status = []
				that.stateList.find(item => {
					if (item.check == true) {
						status.push(item.name)
					}
				})
        let callTimes = ''
        that.timesList.find(item => {
          if (item.check == true) {
            callTimes = item.value
          }
        })
				let params={
					searchVisible:false,
					fixCenters:that.fixCenterOptions,
					fixCenterId:that.fixCenterId,
					personId:that.userId,
					startTime:that.StartCreateTime,
					endTime:that.EndCreateTime,
					type:type,
					status:status,
          callTimes:callTimes
				}
				that.$emit('searchUpdate',params)
			},
		},
	}
</script>

<style lang="less" scoped>
	.search_info {
		position: relative;

		.pop_content {
			box-sizing: border-box;
			padding: 20px;
			background: #fff;
			position: fixed;
			width: 85%;
			height: 100vh;
			overflow: auto;
			right: 0;
			top: 0;
			z-index: 999;
			padding-bottom: 60px;
		}
	}

	.mask {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 998;
	}

	.popSearch {
		font-size: 12px;
		width: 100%;
		padding-top: 20px;

		.popSearchbox {
			width: 100%;

			.popSearchbox_item {
				margin-bottom: 10px;

				.popSearch_tt {
					font-size: 0.24rem;
					font-weight: bold;
					margin-bottom: 12px;

					.tips {
						color: #ff4444;
					}
				}

				.popSearch_time {
					display: flex;
					align-items: center;

					.popSearch_time_txt {
						width: 45%;

						.popSearch_time_val {
							background: #f9f9f9;
							border-radius: 30px;
							text-align: center;
							padding: 7px 0;
							display: block;
							width: 100%;
						}
					}

					.popSearch_time_icon {
						margin: 0 10px;
					}
				}

				.popSearchbox_selectList {
					display: flex;
					flex-wrap: wrap;
					width: 100%;

					.popSearchbox_select_item {
						box-sizing: border-box;
						width: 32%;
						font-size: 0.2rem;
						padding: 7px 0;
						color: #4b4b4b;
						text-align: center;
						margin-right: 2%;
						margin-bottom: 12px;
						background: #f9f9f9;
						border-radius: 20px;
						border: 1px solid #f9f9f9;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;

						&:nth-child(3n) {
							margin-right: 0;
						}

						&.active {
							color: #ff4444;
							background: #ffd8d3;
							border-radius: 62px 62px 62px 62px;
							border: 1px solid #dd5953;
						}
					}
				}

				/deep/ .van-cell {
					padding: 5px 0;
					font-size: 0.22rem;
					color: #4b4b4b;
				}

				/deep/ .van-cell::after {
					border: none;
				}
			}
		}

		.popSearch_footer {
			box-sizing: border-box;
			background: #fff;
			display: flex;
			padding: 10px 20px;
			width: 85%;
			z-index: 1000;
			position: fixed;
			right: 0;
			bottom: 0;

			.popSearch_btn {
				font-size: 15px;
				box-sizing: border-box;
				width: 45%;
				padding: 10px 0;
				border-radius: 50px;
				margin-right: 8%;
				text-align: center;

				&:nth-child(2n) {
					margin-right: 0;
				}

				&.reset_btn {
					color: #dc2326;
					border: 1px solid #dd5953;
				}

				&.save_btn {
					color: #fff;
					background: linear-gradient(316deg, #3975c6 0%, #71a4ea 100%);
				}

				&.confirm_btn {
					color: #fff;
					background: linear-gradient(316deg, #3975c6 0%, #71a4ea 100%);
				}
			}
		}
	}

	.w65 {
		width: 60% !important;
	}

	.w35 {
		width: 40% !important;
	}

	.no_icon {
		padding: 25px;
		padding-top: 100px;
		background: #fff;

		.no_icon_img {
			width: 70px;
			display: block;
			margin: auto;
		}

		.no_icon_txt {
			font-weight: 400;
			font-size: 14px;
			color: #86909c;
			text-align: center;
			margin-top: 10px;
		}
	}

	/deep/ .van-search {
		background: #f2f2f2;
	}

	/deep/ .van-pull-refresh {
		/* margin-top: 109px; */
		margin-top: 175px;
	}
</style>
